<template>
  <div>
    <el-dialog v-dialogDrag :close-on-click-modal="true" class="" title="自动勾选" :visible.sync="open" width="1000px" append-to-body>
      <div style="color: #828696;" class="pad_tb20">可为答案选项“开启”自动勾选功能，答题时系统将自动勾选符合条件的选项。</div>
      <el-scrollbar style=" width: 100%;">
        <div class="set_win_content" style="width: 100%; ">
          <el-form ref="form" :model="form" :rules="rules">
            <div class="item" v-for="(item2,index2) in answers">
              <div class="tt f16 pad_b10"><b>{{item2.answer_title}}</b></div>
              <div class="set_d">
                <div class="flex_ac add_d pad_b10"><div class="dark">自动勾选条件</div> <a href="javascript:;" class="color flex_ac margin_l20" @click="add_item(index2)"><img src="@/assets/add2.png" alt="">添加条件</a></div>
                <div class="s_item flex_ac" v-for="(item,index) in item2.logic">
                  <div class="s">
                    <div class="pad_t10" style="width: 80px;" v-if="index==0"></div>
                    <el-select v-model="item.logic" placeholder="请选择" style="width: 80px;" v-if="index!=0">
                      <el-option
                        v-for="item3 in symbols"
                        :key="item3.logic"
                        :label="item3.title"
                        :value="item3.logic">
                      </el-option>
                    </el-select>
                  </div>
                  <div style="padding: 0 10px 0 20px;">当</div>
                  <div class="flex1">
                    <el-select v-model="item.condition_subject_id" @change="item.condition_answer_id=''" placeholder="请选择题干" class="w_100">
                      <el-option
                        v-for="item4 in subjects"
                        :key="item4.id"
                        :label="item4.title"
                        :value="item4.id">
                      </el-option>
                    </el-select>
                  </div>
                  <div style="padding: 0 10px 0 10px;">选项为</div>
                  <div class="flex1 pad_r20">
                    <el-select v-model="item.condition_answer_id" placeholder="请选择答案" class="w_100">
                      <el-option
                        v-for="item4 in get_child_answers(item.condition_subject_id)"
                        :key="item4.id"
                        :label="item4.answer_title"
                        :value="item4.id">
                      </el-option>
                    </el-select>
                  </div>
                  <a href="javascript:;" class="el-button f15 el-button--text el-button--mini flex_ac" @click="handleDelete(index2,index)" style="color: #FF5D5D;"><img src="@/assets/answer1.png" style="margin-right: 4px;" alt="">删除</a>
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open=false;">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')" :loading="is_ajax">{{is_ajax?'保存中···':'确定'}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'autoSele',
  data () {
    return {
      checkList:[],
      value:'',
      openOptions: [{label:'当前页面打开',value:0},{label:'新页面打开',value:1}],
      form: {},
      // 表单校验
      rules: {
        no: [
          { required: true, message: "项目编号不能为空", trigger: "blur" }
        ],
        title: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ]
      },
      open:false,
      is_ajax:false,
      symbols:[],
      subjects:[],
      answers:[],
    }
  },
  created() {
  },
  methods:{
    get_child_answers(id){
      let arr=[];
      if(id){
        for(let i=0;i<this.subjects.length;i++){
          if(this.subjects[i].id==id){
            return this.subjects[i].answer
          }
        }
      }
      return arr;
    },
    init(row,q_id){
      this.id=row.id;
      this.q_id=q_id;
      this.form={};
      this.open=true;
      this.answers=[];
      this.get_data()
    },
    add_item(i){
      this.answers[i].logic.push({
        condition_subject_id:'',
        condition_answer_id:'',
        logic:''
      })
    },
    get_data(){
      const _this=this;
      _this.axios.get("/api/subject.SubjectSet/search_subject", {params:{q_id:_this.q_id,subject_id:_this.id}}).then(function(res) {
        if(res){
          _this.subjects=res.message
        }
      }).catch(function(error) {
        console.log(error);
      })

      _this.axios.get("/api/subject.SubjectSet/get_logic_answer", {params:{subject_id:_this.id}}).then(function(res) {
        if(res){
            let list=res.message;
            for(let i=0;i<list.length;i++){
              for(let k=0;k<list[i].logic.length;k++){
                list[i].logic[k].condition_answer_id=parseInt(list[i].logic[k].condition_answer_id);
                list[i].logic[k].condition_subject_id=parseInt(list[i].logic[k].condition_subject_id)
              }
            }

            _this.answers=[...list];
        }
      }).catch(function(error) {
        console.log(error);
      })
      _this.axios.get("/api/subject.SubjectSet/get_logic_expression", {params:{subject_id:_this.id}}).then(function(res) {
        if(res){
          _this.symbols=res.message
        }
      }).catch(function(error) {
        console.log(error);
      })
    },
    submitForm(formName) {
      const _this=this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
            for(let i=0;i<_this.answers.length;i++){
              for(let k=0;k<_this.answers[i].logic.length;k++){
                if(!_this.answers[i].logic[k].condition_answer_id || !_this.answers[i].logic[k].condition_subject_id){
                  _this.tip_show('请完善设置','error')
                  return false;
                }
              }
            }
            _this.is_ajax=true;
            let _data={
              subject_id:_this.id
            }
            let logic=[];
            for(let i=0;i<_this.answers.length;i++){
              if(_this.answers[i].logic.length!=0){
                logic.push({
                  rule:_this.answers[i].logic,
                  answer_id:_this.answers[i].id,
                })
              }
            }
            _data.logic=logic;

            console.log(_data);
            let url="/api/subject.SubjectSet/set_logic";
            _this.axios.post(url, _data).then(function(data) {
              if(data){
                _this.tip_show('操作成功','success');
                _this.open=false;
              }
              _this.is_ajax=false;
            }).catch(function(error) {
              _this.is_ajax=false
              console.log(error);
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(index1,index2) {
      const _this=this;
      // const ids = row.id || this.ids;
      this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          _this.answers[index1].logic.splice(index2,1)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.set_win_content{color: #1F2329;}
.set_win_content .item{background: #F4F7FA;  border-radius: 4px; padding: 16px 20px; font-size: 15px;}
.set_win_content .set_d{background: #E4EAF0; padding:  10px 12px; padding-top: 16px;}
.add_d  img{width: 20px; height: 20px; margin-right: 6px;}
.set_win_content .s_item{padding: 5px 0;}
</style>
